<html>
  <body>
    <textarea placeholder="解析props参数文档" id="dominput" style="height: 400px; width: 40%"></textarea>
    <button onclick="zh()">转换>></button>
    <textarea id="dominputjg" style="height: 400px; width: 40%"></textarea>
    <div></div>
    <textarea placeholder="解析事件" id="domevent" style="height: 400px; width: 40%"></textarea>
    <button onclick="zhevent()">转换>></button>
    <textarea id="domeventjg" style="height: 400px; width: 40%"></textarea>
  </body>
</html>
<script>
  function zh() {
    const dic = {
      transprent: '是否透明',
      'followtheme ': '是否跟随全局主题',
      'fontsize ': '文字大小，单位rpx',
      margin: '外间距[x,y]x=左右，y=上下',
      padding: '内间距[x,y]x=左右，y=上下',
      shadow: '投影,0-25',
      width: '宽度，单位rpx',
      height: '高度，单位rpx',
      round: '圆角0-25，单位rpx',
      disabled: '是否禁用',
    };
    let dom = document.querySelector('#dominput');
    let val = dom.value;
    try {
      //正则props参数。块。
      val = val.replace(/(?:^|\n|\r)\s*\/\*[\s\S]*?\*\/\s*(?:\r|\n|$)/g, '');
      val = val.replace(/(?:^|\n|\r)\s*\/\/.*(?:\r|\n|$)/g, '');
      val = val.replace(/\s/g, '');
      val = val.trim();
      val = val.split('},');
      val = val.map((el, index) => {
        if (index < val.length - 1) {
          el += '}';
        }
        return el;
      });
      console.log(val);
      //取参数名称。
      let csm = val.map((el) => {
        let a = el.substring(0, el.indexOf(':'));
        let s = a + ':{type:';
        let bStart = el.indexOf(s) + s.length;
        let bend = el.indexOf(',default:');
        let b = el.substring(bStart, bend);
        let cStart = el.indexOf(',default:') + 9;
        let c = el.substring(cStart, el.length - 1);
        return {
          name: a,
          type: b,
          default: c,
          desc: dic[a.toLocaleLowerCase()] ?? '',
        };
      });
      let ps = '';
      csm.forEach((element) => {
        ps += `| ${element.name} | ${element.type} | ${element.default} | ${element.desc} |` + '\n';
      });
      document.querySelector('#dominputjg').value = ps;
    } catch (e) {
      console.log(e);
      //TODO handle the exception
    }
  }

  function zhevent() {
    let val = document.querySelector('#domevent').value;
    val = val.trim();
    val = val.replace(/\s/g, '');
    val = val.replace(/'/g, '"');

    let jg = eval('(' + val + ')');
    console.log(jg);
    let pl = jg.map((el) => {
      return {
        name: el, //事件名称
        type: '', //参数
        r: '', //返回数据
        des: '', //描述
      };
    });
    let ps = '';
    pl.forEach((element) => {
      ps += `| ${element.name} | ${element.type} | ${element.r} | ${element.des} |` + '\n';
    });
    document.querySelector('#domeventjg').value = ps;
  }
</script>
